<template>
	<view class="fabu">
		<view class="item">
			<view class="item-pic">
				<image src="/static/fabu-zx.jpg" mode="widthFix"></image>
			</view>
			<view class="item-item">
				<view class="item-item__title">资讯</view>
				<view class="item-item__desc">时政要闻/家乡动态/社会热点</view>
			</view>
		</view>
		<view class="item">
			<view class="item-pic">
				<image src="/static/fabu-jz.jpg" mode="widthFix"></image>
			</view>
			<view class="item-item">
				<view class="item-item__title">家政</view>
				<view class="item-item__desc">搬家/维修/装修/保洁/保姆</view>
			</view>
		</view>
		<view class="item">
			<view class="item-pic">
				<image src="/static/fabu-cx.jpg" mode="widthFix"></image>
			</view>
			<view class="item-item">
				<view class="item-item__title">出行</view>
				<view class="item-item__desc">人找车/车找人/顺风车</view>
			</view>
		</view>
		<view class="item">
			<view class="item-pic">
				<image src="/static/fabu-zr.jpg" mode="widthFix"></image>
			</view>
			<view class="item-item">
				<view class="item-item__title">转让</view>
				<view class="item-item__desc">生意转让/店面转让/物品转让</view>
			</view>
		</view>
		<view class="item">
			<view class="item-pic">
				<image src="/static/fabu-gz.jpg" mode="widthFix"></image>
			</view>
			<view class="item-item">
				<view class="item-item__title">工作</view>
				<view class="item-item__desc">求职/招聘/猎头</view>
			</view>
		</view>
		<view class="item">
			<view class="item-pic">
				<image src="/static/fabu-fc.jpg" mode="widthFix"></image>
			</view>
			<view class="item-item">
				<view class="item-item__title">房产</view>
				<view class="item-item__desc">求租/出租/求购/出售</view>
			</view>
		</view>
		<view class="item">
			<view class="item-pic">
				<image src="/static/fabu-sj.jpg" mode="widthFix"></image>
			</view>
			<view class="item-item">
				<view class="item-item__title">商家</view>
				<view class="item-item__desc">衣食住行/吃喝玩乐/健康/教育</view>
			</view>
		</view>
		<view class="item">
			<view class="item-pic">
				<image src="/static/fabu-gy.jpg" mode="widthFix"></image>
			</view>
			<view class="item-item">
				<view class="item-item__title">公益</view>
				<view class="item-item__desc">寻人/寻物/求助/打听/便民服务</view>
			</view>
		</view>



	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		watch: {
			// 检测userinfo的变化
			userinfo(newVal) {
				//userinfo 变好了
				console.log('watch userinfo变化了')
			}
		},
		onShow() {
			console.log(this.userinfo)
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.fabu {
		.item {
			display: flex;
			align-items: center;
			padding: 30rpx 60rpx;
			border-bottom: 1px solid #ECECEC;

			&:after {
				border-bottom: unset;
			}

			.item-pic {
				flex-shrink: 0;
				width: 45px;

				image {
					width: 100%;
				}
			}

			.item-item {
				margin-left: 20px;

				.item-item__title {
					font-size: 16px;
					color: #000;
				}

				.item-item__desc {
					font-size: 13px;
					color: gray;
				}
			}
		}
	}
</style>
